<!-- eslint-disable vue/multi-word-component-names -->
<!-- eslint-disable vue/no-mutating-props -->
<template>
    <el-form size="small" label-width="auto" label-suffix=" :">
        <el-descriptions size="small" :column="5" direction="vertical" class="gapDescriptions">
            <template v-for="im, ix in data.dataType" :key="ix">
                <el-descriptions-item width="90">{{ im.label || `断点${ix}` }} :</el-descriptions-item>
                <el-descriptions-item :label="ix ? '' : '数据类型'" width="50%">
                    <el-form-item>
                        <el-select v-model="im.value" filterable :filter-method="filterMethod">
                            <el-option label="矩形" value="rect"></el-option>
                            <el-option label="圆形" value="circle"></el-option>
                        </el-select>
                    </el-form-item>
                </el-descriptions-item>
                <el-descriptions-item :label="ix ? '' : '助手'">
                    <el-form-item>
                        <el-button @click="data.show = data.show == ix ? null : ix">
                            <el-icon>
                                <DArrowRight v-show="data.show != ix" />
                                <DArrowLeft v-show="data.show == ix" />
                            </el-icon>
                        </el-button>
                    </el-form-item>
                </el-descriptions-item>
                <el-descriptions-item :label="ix ? '' : '最小值'">
                    <el-form-item v-if="ix != data.dataType.length - 2 &&
                        ix != data.dataType.length - 3">
                        <el-input v-model="data.time" placeholder=""></el-input>
                    </el-form-item>
                </el-descriptions-item>
                <el-descriptions-item :label="ix ? '' : '最大值'">
                    <el-form-item v-if="ix != data.dataType.length - 2 &&
                        ix != data.dataType.length - 3">
                        <el-input v-model="data.time" placeholder=""></el-input>
                    </el-form-item>
                </el-descriptions-item>
                <template v-if="data.show == ix">
                    <el-descriptions-item />
                    <el-descriptions-item span="4">
                        <labelArea label="数据类型助手" class="zhushou">
                            <div>
                                <el-form size="small" inline label-width="auto" label-suffix=" :" style="width: 120px;">
                                    <el-form-item label="模式" style="display: flex;align-items: start;padding-top: 2px;">
                                        <el-select v-model="im.mode">
                                            <el-option value="继承" />
                                            <el-option value="内置" />
                                            <el-option value="定点" />
                                            <el-option value="表达式" />
                                        </el-select>
                                    </el-form-item>
                                </el-form>


                                <el-form size="small" inline label-width="auto" label-suffix=" :" class="zhushou1">
                                    <el-form-item v-if="im.mode == '继承'">
                                        <el-select v-model="data.time">
                                            <el-option label="矩形" value="rect"></el-option>
                                            <el-option label="圆形" value="circle"></el-option>
                                        </el-select>
                                    </el-form-item>
                                    <template v-if="im.mode == '内置'">
                                        <el-form-item style="width: 100px;">
                                            <el-select v-model="data.time">
                                                <el-option label="矩形" value="rect"></el-option>
                                                <el-option label="圆形" value="circle"></el-option>
                                            </el-select>
                                        </el-form-item>
                                        <el-form-item label="数据类型覆盖">
                                            <el-select v-model="im.mode">
                                                <el-option label="矩形" value="rect"></el-option>
                                                <el-option label="圆形" value="circle"></el-option>
                                            </el-select>
                                        </el-form-item>
                                    </template>
                                    <template v-if="im.mode == '定点'">
                                        <el-form-item style="">
                                            <el-form size="small" label-width="auto" label-position="left" label-suffix=" :">
                                                <el-form-item label="符号性">
                                                    <el-select v-model="im.mode">
                                                        <el-option label="矩形" value="rect"></el-option>
                                                        <el-option label="圆形" value="circle"></el-option>
                                                    </el-select>
                                                </el-form-item>
                                                <el-form-item label="调整尺度">
                                                    <el-select v-model="im.mode">
                                                        <el-option label="矩形" value="rect"></el-option>
                                                        <el-option label="圆形" value="circle"></el-option>
                                                    </el-select>
                                                </el-form-item>
                                                <el-form-item label="数据类型覆盖">
                                                    <el-select v-model="im.mode">
                                                        <el-option label="矩形" value="rect"></el-option>
                                                        <el-option label="圆形" value="circle"></el-option>
                                                    </el-select>
                                                </el-form-item>
                                            </el-form>
                                        </el-form-item>
                                        <el-form-item label="字长"
                                            style="display: flex;align-items: start;padding-top: 2px;">
                                            <el-input v-model="data.time" placeholder=""></el-input>
                                        </el-form-item>
                                    </template>
                                    <template v-if="im.mode == '表达式'">
                                        <el-form-item>
                                            <el-input v-model="data.time" placeholder=""></el-input>
                                        </el-form-item>
                                    </template>
                                </el-form>
                            </div>
                            <div v-if="im.mode == '定点'" style="width:100%;">
                                <FoldBox title="定点详细信息">
                                    <el-form size="small" label-width="auto" label-position="left" label-suffix=" :"
                                        class="xiangxi">
                                        <el-form-item label="可表示的最大值">
                                            {{ '32767' }}
                                        </el-form-item>
                                        <el-form-item label="表数据最大值">
                                            {{ '未知' }}
                                        </el-form-item>
                                        <el-form-item label="表数据">
                                            {{ '0.999999999' }}
                                        </el-form-item>
                                        <el-form-item label="表数据最小值">
                                            {{ '未知' }}
                                        </el-form-item>
                                        <el-form-item label="可表示的最小值">
                                            {{ '未知' }}
                                        </el-form-item>
                                        <el-form-item label="精度">
                                            {{ '未知' }}
                                        </el-form-item>
                                        <el-form-item>
                                            <el-button>刷新详细信息</el-button>
                                        </el-form-item>
                                    </el-form>
                                </FoldBox>
                            </div>
                        </labelArea>
                    </el-descriptions-item>
                </template>
            </template>
        </el-descriptions>
    </el-form>
    <el-form size="small" label-width="auto" label-position="left" label-suffix=" :" style="width: 50%;">
        <el-form-item label="内部规则优先级">
            <el-select></el-select>
        </el-form-item>
        <el-form-item>
            <ctcheckbox v-model="data.ZeroCross">要求所有输入(u)具有相同的数据类型</ctcheckbox>
        </el-form-item>
        <el-form-item>
            <ctcheckbox v-model="data.ZeroCross">锁定数据类型设置以防止被定点工具更改</ctcheckbox>
        </el-form-item>
        <el-form-item label="整数舍入模式">
            <el-select></el-select>
        </el-form-item>
        <el-form-item>
            <ctcheckbox v-model="data.ZeroCross">对整数溢出进行饱和处理</ctcheckbox>
        </el-form-item>
    </el-form>
</template>

<script setup>

const { data } = defineProps(['data'])



function filterMethod(e) {
    console.log(e);
    return e
}
</script>


<style scoped>
.zhushou {
    &>div {
        display: flex;

        &>.el-form {
            &.zhushou1 {
                width: calc(100% - 120px);
                margin-left: 8px;
                display: flex;
            }

            & .el-form-item {
                width: 100%;
                margin: 0;
            }

            &>.el-form-item+.el-form-item {
                margin-left: 8px;
            }
        }
    }

}

.xiangxi {
    &>>>.el-form-item__content {
        justify-content: end;
        max-width: 50%;
    }

    &>>>.el-form-item:last-child {
        position: relative;

        &>>>.el-form-item__content {
            position: absolute;
            top: -32px;
            right: 0;
        }
    }
}
</style>